Виджеты. ListView GridView

➡️ Скачать презентацию. Flutter ListView GridView
➡️ Ссылка на репозиторий с кодом этого урока

Виджет ListView

ListView это прокручиваемый список элементов.

Он используется для отображения больших объемов данных, так как поддерживает ленивую загрузку (Lazy Loading), что делает его более производительным по сравнению с SingleChildScrollView.

ListView стоит использовать, если элементов может быть бесконечно много!

Виды ListView

1. ListView() (обычный конструктор) - список из фиксированного количества виджетов
2. ListView.builder - эффективный способ создания списка с динамической генерацией
3. ListView.separated - список с разделителями между элементами
4. ListView.custom - список с настраиваемым поведением

Свойства ListView

• scrollDirection : направление прокрутки
• reverse : изменение направления прокрутки (с конца в начало)
• controller : контроллер для управления прокруткой
• physics : физика прокрутки
• shrinkWrap : нужно ли подстраиваться под размер содержимого.
• padding : отступы вокруг списка.

Воспользуемся обычным конструктором ListView() и добавим 25 элементов ListTile()

Виджет ListTile()

ListTile() это виджет для подробного отображения элемента списка

title : обычный текст
subtitle : подзаголовок
leading : иконка в начале
traling : иконка в конце

Файл listview_widget.dart

import 'package:flutter/material.dart';

// Обычный конструктор ListView
class ListViewExample1 extends StatelessWidget {
  const ListViewExample1({super.key});
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        ListTile(title: Text("Заголовок 1")),
        ListTile(title: Text("Заголовок 2")),
        ListTile(title: Text("Заголовок 3")),
        ListTile(title: Text("Заголовок 4")),
        ListTile(title: Text("Заголовок 5")),
        ListTile(title: Text("Заголовок 6")),
        ListTile(title: Text("Заголовок 7")),
        ListTile(title: Text("Заголовок 8")),
        ListTile(title: Text("Заголовок 9")),
        ListTile(title: Text("Заголовок 11")),
        ListTile(title: Text("Заголовок 12")),
        ListTile(title: Text("Заголовок 13")),
        ListTile(title: Text("Заголовок 14")),
        ListTile(title: Text("Заголовок 15")),
        ListTile(title: Text("Заголовок 16")),
        ListTile(title: Text("Заголовок 17")),
        ListTile(title: Text("Заголовок 18")),
        ListTile(title: Text("Заголовок 19")),
        ListTile(title: Text("Заголовок 20")),
        ListTile(title: Text("Заголовок 21")),
        ListTile(title: Text("Заголовок 22")),
        ListTile(title: Text("Заголовок 23")),
        ListTile(title: Text("Заголовок 24")),
        ListTile(title: Text("Заголовок 25")),
      ],
    );
  }
}

                  

ListView.builder

Воспользуемся  более эффективным конструктором ListView.builder и добавим 200 элементов ListTile

// Эффективный конструктор ListView.builder
class ListViewExample2 extends StatelessWidget {
  const ListViewExample2({super.key});
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 200,
      itemBuilder: (context, index) {
        return ListTile(
          leading: Icon(Icons.star),
          title: Text('Элемент ${index + 1}'),
        );
      },
    );
  }
}
                  

itemCount: Количество элементов списка
itemBuilder: Анонимная функция которая возвращает виджет - элемент списка
index: itemBuilder создаёт элементы в цикле с индексом от 0 до 199

ListView.separated

Конструктор с разделителем между элементами списка ListView.separated

// Эффективный конструктор ListView.separated + Разделители элементов
class ListViewExample3 extends StatelessWidget {
  const ListViewExample3({super.key});
  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      itemCount: 200,
      separatorBuilder: (context, index) => Divider(
        color: Colors.black, // Цвет линии
        thickness: 0.2, // Толщина линии
        height: 1, // Высота разделителя
      ),
      itemBuilder: (context, index) {
        return ListTile(
          leading: Icon(Icons.favorite_border),
          title: Text('Элемент ${index + 1}'),
        );
      },
    );
  }
}
                  

separatorBuilder : разделителем может быть любой виджет.
Divider : тонкая горизонтальная линия с отступами с обеих сторон.

Производительность

В каждый момент времени в памяти хранятся только те элементы, которые видны на экране, а также по одному дополнительному элементу сверху и снизу.

Это позволяет плавно прокручивать список без задержек, заранее подготавливая новые элементы.

Горизонтальная прокрутка Axis.horizontal

// Горизонтальная прокрутка
class ListViewExample4 extends StatelessWidget {
  const ListViewExample4({super.key});
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: 20,
      itemBuilder: (context, index) {
        return Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8),
          child: Chip(
            label: Text("Элемент ${index + 1}"),
            backgroundColor: Colors.white,
            padding: EdgeInsets.all(16),
          ),
        );
      },
    );
  }
}